/* 全局自定义应用变量 */
:root {
	--bg-color: #F5F5F5;
	--text-color: #181818;
	--area-color: #fff;
	--black-color: #000000;
	--white-text: #000000;
	--grey-text: #8b8a8a;
	--line-color: #d7d6d6;
	--shadow-color: #e7e7e7;
	--bg-center-color:#feffff;
	--input-bg:#f7f7f7;
	--room-type-bg:#efefef;
	--room-split-line:#f3f0f0;
	--send-goods-type:#f7f7f7;
}


/* 深色模式下的变量 */
@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #181818;
		--text-color: #f5f5f5;
		--area-color: #000;
		--black-color: #ffffff;
		--white-text: #ffffff;
		--grey-text: #9f9c9c;
		--line-color: #5f5e5e;
		--shadow-color: #252525;
		--bg-center-color:#232323;
		--input-bg:#232323;
		--room-type-bg:#2f2f2f;
		--room-split-line:#1e1a1a;
		--send-goods-type:#232323;
	}
}

.page {
	background-color: var(--bg-color);
	/* height: 100vh; */
}

page {
	background-color: var(--bg-color);
	height: 100vh;
}

.flex {
	display: flex;
	align-items: center;
	&-row {
		display: flex;
		flex-direction: row;
	}
	&-wrap {
		flex-wrap: wrap;
	}
	&-nowrap {
		flex-wrap: nowrap;
	}
	&-col {
		display: flex;
		flex-direction: column;
	}
	&-1 {
		flex: 1;
	}
	&-shrink {
		flex-shrink: 0;
	}
	&-jus-cen {
		justify-content: center;
	}
	&-jus-bet {
		justify-content: space-between;
	}
	&-jus-end {
		justify-content: end;
	}
	&-jus-aro {
		justify-content: space-around;
	}
	&-jus-eve {
		justify-content: space-evenly;
	}
	&-jus-self-end {
		justify-self: end;
	}
	&-ali-cen {
		align-items: center;
	}
	&-ali-sta {
		align-items: flex-start;
	}
	&-ali-end {
		align-items: flex-end;
	}
}
.mar-auto {
	margin-left: auto;
}
.bold-text {
	font-weight: bold;
}
.bor-top {
	position: relative;
	&::before {
		position: absolute;
		left: 0;
		top: 0;
		content: '';
		width: 100%;
		height: 1rpx;
		transform: scaleY(.5);
		background-color: var(--line-color);
	}
}
.bor-right {
	position: relative;
	&::after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: '';
		height: 100%;
		width: 1rpx;
		transform: scaleX(.5);
		background-color: var(--line-color);
	}
}
.bor-bot {
	position: relative;
	&::after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: '';
		width: 100%;
		height: 1rpx;
		transform: scaleY(.5);
		background-color: var(--line-color);
	}
}

.bor-bot-active {
	position: relative;
	&::after {
		position: absolute;
		left: 0;
		bottom: 0;
		content: '';
		width: 100%;
		height: 4rpx;
		background-color: var(--white-text);
	}
}
input {
	font-size: 28rpx;
	color: #333;
	&::-webkit-input-placeholder {
		font-size: 28rpx;
		color: #888888;
	}
}

$directions: (
	't': 'top',
	'b': 'bottom',
	'l': 'left',
	'r': 'right'
);
$dimensions: (
	'm': 'margin',
	'p': 'padding'
);
@each $dim in $dimensions {
	@each $dir in $directions {
		@for $i from 1 through 200 {
			$size: $i*1;
			.#{nth($dim, 1)}-#{nth($dir, 1)}-#{$size} {
				#{nth($dim, 2)}-#{nth($dir, 2)}: #{$size}rpx;
			}
		}
	}
}
@for $n from 20 through 40 {
	$num: $n*1;
	.f-s-#{$num} {
		font-size: #{$num}rpx;
	}
}

.line-split {
	height: 1rpx;
	background-color: var(--line-color);
	transform: scaleY(0.5);
}
.load-bottom {
	height: 100rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}
.load_over {
	font-size: 26rpx;
	color: var(--grey-text);
	text-align: center;
}

.load_in {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.load_in_ani {
	animation: rotateAnimation 3s linear infinite;
}

@keyframes rotateAnimation {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}